import { BellOutlined } from '@ant-design/icons';
import { Badge, Popover, List, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

const { Text } = Typography;

interface TodoItem {
  id: string;
  title: string;
  datetime: string;
  status: 'pending' | 'processing' | 'urgent';
}

const NoticeIcon: React.FC = () => {
  const [todos, setTodos] = useState<TodoItem[]>([]);

  useEffect(() => {
    // 这里可以调用获取待办的接口
    // 暂时使用模拟数据
    const mockTodos = [
      {
        id: '1',
        title: '您有一个新的任务待处理',
        datetime: '2024-01-10 10:00',
        status: 'urgent',
      },
      {
        id: '2',
        title: '系统更新提醒',
        datetime: '2024-01-09 14:30',
        status: 'processing',
      },
      {
        id: '3',
        title: '待审批的申请',
        datetime: '2024-01-09 09:15',
        status: 'pending',
      },
    ];
    setTodos(mockTodos);
  }, []);

  const content = (
    <List
      className={styles.list}
      itemLayout="horizontal"
      dataSource={todos}
      renderItem={(item) => (
        <List.Item>
          <List.Item.Meta
            title={item.title}
            description={
              <Text type="secondary" style={{ fontSize: 12 }}>
                {item.datetime}
              </Text>
            }
          />
        </List.Item>
      )}
    />
  );

  return (
    <Popover
      content={content}
      title="待办事项"
      trigger="click"
      placement="bottomRight"
    >
      <Badge count={todos.length} offset={[-5, 5]}>
        <BellOutlined className={styles.icon} />
      </Badge>
    </Popover>
  );
};

export default NoticeIcon; 
